<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>APP Spotlight</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/sticky-navigationbar.js"></script>

<link rel="stylesheet" type="text/css" href="css/html_content.css"/>
<script type="text/javascript" src="js/FWDUltimate3DCarousel.js"></script>
		<!-- Setup the carousel (all settings are explained in detail in the documentation files) -->
		<script type="text/javascript">
			var carousel;
			
			FWDU3DCarUtils.onReady(function(){
				carousel = new FWDUltimate3DCarousel({
					
					//required settings
					carouselHolderDivId:"myDiv",
					carouselDataListDivId:"carouselData",
					displayType:"fixed",
					autoScale:"yes",
					carouselWidth:940,
					carouselHeight:400,
					skinPath:"load/skin_modern_silver",
												
					//main settings
					backgroundColor:"",
					backgroundImagePath:"",
					thumbnailsBackgroundImagePath:"",
					scrollbarBackgroundImagePath:"",
					backgroundRepeat:"repeat-x",
					carouselStartPosition:"center",
					carouselTopology:"star",
					carouselXRadius:428,
					carouselYRadius:0,
					carouselXRotation:10,
					carouselYOffset:0,
					showCenterImage:"no",
					centerImagePath:"",
					centerImageYOffset:0,
					showDisplay2DAlways:"no",
					slideshowDelay:5000,
					autoplay:"yes",
					showPrevButton:"no",
					showNextButton:"no",
					showSlideshowButton:"no",
					disableNextAndPrevButtonsOnMobile:"no",
					controlsMaxWidth:940,
					controlsHeight:31,
					controlsPosition:"bottom",
					slideshowTimerColor:"#777777",
					rightClickContextMenu:"developer",
					addKeyboardSupport:"yes",
					fluidWidthZIndex:1000,
												
					//thumbnail settings
					thumbnailWidth:400,
					thumbnailHeight:266,
					thumbnailBorderSize:10,
					thumbnailMinimumAlpha:.1,
					thumbnailBackgroundColor:"#666666",
					thumbnailBorderColor1:"#fcfdfd",
					thumbnailBorderColor2:"#e4e4e4",
					transparentImages:"no",
					maxNumberOfThumbnailsOnMobile:13,
					showThumbnailsGradient:"yes",
					showThumbnailsHtmlContent:"no",
					textBackgroundColor:"#333333",
					textBackgroundOpacity:.7,
					showText:"yes",
					showTextBackgroundImage:"yes",
					showFullTextWithoutHover:"no",
					showThumbnailBoxShadow:"yes",
					thumbnailBoxShadowCss:"0px 2px 2px #555555",
					showReflection:"yes",
					reflectionHeight:60,
					reflectionDistance:0,
					reflectionOpacity:.7,
												
					//scrollbar settings
					showScrollbar:"no",
					disableScrollbarOnMobile:"no",
					enableMouseWheelScroll:"no",
					scrollbarHandlerWidth:300,
					scrollbarTextColorNormal:"#777777",
					scrollbarTextColorSelected:"#000000",
												
					//combobox settings
					showComboBox:"no",
					startAtCategory:1,
					selectLabel:"SELECT CATEGORIES",
					allCategoriesLabel:"All Categories",
					showAllCategories:"no",
					comboBoxPosition:"topright",
					selectorBackgroundNormalColor1:"#fcfdfd",
					selectorBackgroundNormalColor2:"#e4e4e4",
					selectorBackgroundSelectedColor1:"#a7a7a7",
					selectorBackgroundSelectedColor2:"#8e8e8e",
					selectorTextNormalColor:"#8b8b8b",
					selectorTextSelectedColor:"#FFFFFF",
					buttonBackgroundNormalColor1:"#e7e7e7",
					buttonBackgroundNormalColor2:"#e7e7e7",
					buttonBackgroundSelectedColor1:"#a7a7a7",
					buttonBackgroundSelectedColor2:"#8e8e8e",
					buttonTextNormalColor:"#000000",
					buttonTextSelectedColor:"#FFFFFF",
					comboBoxShadowColor:"#000000",
					comboBoxHorizontalMargins:12,
					comboBoxVerticalMargins:20,
					comboBoxCornerRadius:0,
					
					//lightbox settings
					addLightBoxKeyboardSupport:"no",
					showLightBoxNextAndPrevButtons:"no",
					showLightBoxZoomButton:"no",
					showLightBoxInfoButton:"no",
					showLighBoxSlideShowButton:"no",
					showLightBoxInfoWindowByDefault:"no",
					slideShowAutoPlay:"no",
					lightBoxVideoAutoPlay:"no",
					lightBoxVideoWidth:640,
					lightBoxVideoHeight:520,
					lightBoxIframeWidth:710,
					lightBoxIframeHeight:480,
					lightBoxBackgroundColor:"#000000",
					lightBoxInfoWindowBackgroundColor:"#FFFFFF",
					lightBoxItemBorderColor1:"#fcfdfd",
					lightBoxItemBorderColor2:"#e4FFe4",
					lightBoxItemBackgroundColor:"#333333",
					lightBoxMainBackgroundOpacity:.8,
					lightBoxInfoWindowBackgroundOpacity:.9,
					lightBoxBorderSize:0,
					lightBoxBorderRadius:0,
					lightBoxSlideShowDelay:4000
				});
				
				carousel.addListener(FWDUltimate3DCarousel.IS_API_READY, onApiReady);
				carousel.addListener(FWDUltimate3DCarousel.THUMB_CHANGE, onThumbChange);
				carousel.addListener(FWDUltimate3DCarousel.CATEGORY_CHANGE, onCategoryChange);
			})
			
			function gotoNextCategory()
			{
				carousel.switchCategory(carousel.getCurrentCategoryId() + 1);
			}
			
			function gotoNextThumb()
			{
				carousel.gotoThumb(carousel.getCurrentThumbId() + 1);
			}
			
			function gotoPrevThumb()
			{
				carousel.gotoThumb(carousel.getCurrentThumbId() - 1);
			}
			
			function startStopSlideshow()
			{
				if (carousel.isSlideshowPlaying())
				{
					carousel.stopSlideshow();
				}
				else
				{
					carousel.startSlideshow();
				}
			}
			
			function onApiReady()
			{
				console.log("api ready");
			}
			
			function onThumbChange(ev)
			{
				console.log("thumb id: " + ev.id);
			}
			
			function onCategoryChange(ev)
			{
				console.log("category id: " + ev.id);
			}
		</script>
<link rel="stylesheet" href="css/colorbox.css" />
<script type="text/javascript" src="js/jquery.colorbox.js"></script>		
		<script>
			$(document).ready(function(){
				//Examples of how to assign the Colorbox event to elements
				$(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2', transition:"fade"});
				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				$(".group4").colorbox({rel:'group4', slideshow:true});
				$(".ajax").colorbox();
				$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
				$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
				$(".iframe").colorbox({iframe:true, width:"770px", height:"450px"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});

				$('.non-retina').colorbox({rel:'group5', transition:'none'})
				$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>			
</head>
<body id="top">

<div id="top_wrapper">
<p id="back-top">
		<a href="#top"><span></span>TOP</a>
</p>
<script>
$(document).ready(function(){

	// hide #back-top first
	$("#back-top").hide();
	
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});

</script>
	<div id="head_top">
		<div class="head_container">
			<div id="app_logo" onclick="location.href='index.html';" style="cursor:pointer"></div>
		</div>
	</div>

	<div id="sticky_navigation_wrapper">
		<div id="sticky_navigation">
			<div class="bar_container">
				<ul>
					<li><a href="#" class="selected">首 頁</a></li>
					<li><a href="#">熱門排行</a></li>
					<li><a href="#">各國限定APP</a></li>
					<li><a href="#">專題評測</a></li>
					<li><a href="#">許願專區</a></li>
					<li><a href="#">儲值點數</a></li>
					<li><a href="#">積分兌換</a></li>
					<li><a href="#">APP市集</a></li>
					<li><a href="#">產品下載</a></li>
				</ul>
			</div>
		</div>
	</div>

	
</div><!-- #demo_top_wrapper -->

<!-- everything below is just content -->

<section id="main">

	<div id="content">


<!-- div used as a holder for the carousel -->
		<div id="myDiv"></div>
		
	
		<!-- carousel data -->
		<div id="carouselData" style="display: none;">
			
			<!-- image datalist category 1 -->
			<ul data-cat="Category one">
			
				<ul>
					<li data-type="iframe" data-url="lightbox.html"></li>
					<li data-thumbnail-path="load/thumbnails/2.jpg"></li>
					<li data-thumbnail-text="" data-thumbnail-text-title-offset="35"
					data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
						<p class="largeLabel">RESPONSIVE LAYOUT</p>
						<p class="smallLabel">The carousel has responsive layout.</p>
					</li>
	
				</ul>
				
				<ul>
					<li data-type="iframe" data-url="lightbox.html"></li>
					<li data-thumbnail-path="load/thumbnails/3.jpg"></li>
					<li data-thumbnail-text="" data-thumbnail-text-title-offset="35"
					data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
						<p class="largeLabel">2D FALLBACK FOR OLDER BROWSERS LIKE IE7/8</p>
						<p class="smallLabel">On a older browser that does not have 3D support the carousel will
						display in a 2D format.</p>
					</li>

				</ul>
				
				<ul>
					<li data-type="iframe" data-url="lightbox.html"></li>
					<li data-thumbnail-path="load/thumbnails/4.jpg"></li>
					<li data-thumbnail-text="" data-thumbnail-text-title-offset="35"
					data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
						<p class="largeLabel">VIMEO AND YOUTUBE SUPPORT</p>
						<p class="smallLabel">The carousel lightbox can load and play videos from youtube or vimeo easely.</p>
					</li>

				</ul>
				
				<ul>
					<li data-type="iframe" data-url="lightbox.html"></li>
					<li data-thumbnail-path="load/thumbnails/5.jpg"></li>
					<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
						<p class="largeLabel">VIMEO AND YOUTUBE SUPPORT</p>
						<p class="smallLabel">The carousel lightbox can load and play videos from youtube or vimeo easily.</p>
					</li>

				</ul>

				<ul>
					<li data-type="iframe" data-url="lightbox.html"></li>
					<li data-thumbnail-path="load/thumbnails/6.jpg"></li>
					<li data-thumbnail-text="" data-thumbnail-text-title-offset="35"
					data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
						<p class="largeLabel">IFRAME SUPPORT!</p>
						<p class="smallLabel">The lightbox can load a HTML page and display it with ease.</p>
					</li>
	
				</ul>	
				
			</ul>
			<!-- end  -->
			
			
			
		</div>

	</div>
	
	
</section><!-- #main -->
<section id="main2">
<div id="container">
<!------------- 熱門文章&熱門推薦------------------------>
<div id="content3">
	<div class="home-col3">
		<h2>熱門文章</h2>
		<div class="newslist"><a class='iframe' href="lightbox.html">此次專案構想,是我的長官,想要做一個「網站平台」來展示</a></div>
		<div class="newslist2">網站包含計數功能(需有一個適合放計數器的地方)台」來展示</div>
		<div class="newslist">此次專案構想,是我的長官,想要做一個「網站平台」來展示</div>

	</div>
	<div class="home-col4">
		<h2>熱門推薦</h2> 
		<div class="commercial"><a class='iframe' href="lightbox.html"><div class="fakeblog"></div></a></div>
		<div class="commercial2"><a class='iframe' href="lightbox.html"><div class="fakeblog"></div></a></div>
		<div class="commercial3"><a class='iframe' href="lightbox.html"><div class="fakeblog"></div></a></div>
	</div>	
</div>

<!------------- 熱門文章&熱門推薦------------------------>
<!------------- 百萬APP------------------------>
<div id="content1">
	<div class="home-col1"> <div class="more"><a href="#">Check For More ></a></div>
	<h2>百萬APP</h2> 
			<div style="border: dashed 0px #693; float:left; display:inline-block; width:665px;" >
			<div class="arrow-left" onclick='slider4.prev();return false;'></div><div class="arrow-right" onclick='slider4.next();return false;'></div>
			<div id='slider4' class='swipe'>
			  <div>
				<div style='display:block'><div style=" height:125px;"><a class='iframe' href="lightbox.html"><div class="koma"></div><p>APP Name<br>APP 類別</p></a></div><div style=" height:125px;"><a class='iframe' href="lightbox.html"><div class="koma"></div><p>APP Name<br>APP 類別</p></a></div><div style=" height:125px;"><a class='iframe' href="lightbox.html"><div class="koma"></div><p>APP Name<br>APP 類別</p></a></div><div style=" height:125px;"><a class='iframe' href="lightbox.html"><div class="koma"></div><p>APP Name<br>APP 類別</p></a></div><div style=" height:125px;"><a class='iframe' href="lightbox.html"><div class="koma"></div><p>APP Name<br>APP 類別</p></a></div></div>
								
				<div style='display:none'><div style="height:125px;"><div class="koma2"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma2"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma2"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma2"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma2"></div><p>APP Name<br>APP 類別</p></div></div>
				
				<div style='display:none'><div style="height:125px;"><div class="koma3"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma3"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma3"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma3"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma3"></div><p>APP Name<br>APP 類別</p></div></div>
				
			  </div>
			</div>
			
			</div>

	</div>		
<script src='js/swipe.js'></script>
<script>
var slider4 = new Swipe(document.getElementById('slider4'));
</script>
</div>
<!------------- 百萬APP------------------------>

<!------------- 新秀APP------------------------>
<div id="content2">
	<div class="home-col2"><div class="more"><a href="#">Check For More ></a></div>
	<h2>新秀APP</h2> 
			<div style="border: dashed 0px #693; float:left; display:inline-block; width:665px;" >
			<div class="arrow-left" onclick='slider3.prev();return false;'></div><div class="arrow-right" onclick='slider3.next();return false;'></div>
			<div id='slider3' class='swipe'>
			  <div>
				<div style='display:block'><div style="height:125px;"><div class="koma4"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma4"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma4"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma4"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma4"></div><p>APP Name<br>APP 類別</p></div></div>
				
				<div style='display:block'><div style="height:125px;"><div class="koma2"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma2"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma2"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma2"></div><p>APP Name<br>APP 類別</p></div><div style=" height:125px;"><div class="koma2"></div><p>APP Name<br>APP 類別</p></div></div>
				
			  </div>
			</div>
			
			</div>
	</div>		
<script>
var slider3 = new Swipe(document.getElementById('slider3'));
</script>
</div>
<!------------- 新秀APP------------------------>	

</div>
</section>	
<footer>
	<p>Copyright © 2014 APP SpotLingt &nbsp;&nbsp;&nbsp;<span class="stat-count">4</span><span class="stat-count">2</span><span class="stat-count">0</span></p>
</footer>

</body>
</html>